<template>
  <AdminLayout title="日志详情" subtitle="查看操作日志详细信息">
    <div class="max-w-4xl mx-auto">
      <div class="bg-white shadow-sm rounded-lg overflow-hidden">
        <!-- 头部信息 -->
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-medium text-gray-900">{{ log.description }}</h3>
            <Link :href="route('admin.logs.index')" class="text-sm text-gray-600 hover:text-gray-900">
              ← 返回列表
            </Link>
          </div>
        </div>

        <!-- 详细信息 -->
        <div class="px-6 py-6 space-y-6">
          <!-- 基本信息 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">操作人</label>
              <p class="text-base text-gray-900">
                {{ log.user_name }}
                <span v-if="log.user" class="text-sm text-gray-500">(ID: {{ log.user.id }})</span>
              </p>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">操作时间</label>
              <p class="text-base text-gray-900">{{ formatDate(log.created_at) }}</p>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">操作类型</label>
              <span :class="getActionBadgeClass(log.action)" class="px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full">
                {{ getActionName(log.action) }}
              </span>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">所属模块</label>
              <p class="text-base text-gray-900">{{ getModuleName(log.module) }}</p>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">IP地址</label>
              <p class="text-base text-gray-900">{{ log.ip_address }}</p>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">请求方法</label>
              <p class="text-base text-gray-900">{{ log.method }}</p>
            </div>
          </div>

          <!-- URL -->
          <div>
            <label class="block text-sm font-medium text-gray-500 mb-1">请求URL</label>
            <p class="text-base text-gray-900 break-all bg-gray-50 px-3 py-2 rounded">{{ log.url }}</p>
          </div>

          <!-- User Agent -->
          <div v-if="log.user_agent">
            <label class="block text-sm font-medium text-gray-500 mb-1">User Agent</label>
            <p class="text-sm text-gray-700 break-all bg-gray-50 px-3 py-2 rounded">{{ log.user_agent }}</p>
          </div>

          <!-- 旧数据 -->
          <div v-if="log.old_data && Object.keys(log.old_data).length > 0">
            <label class="block text-sm font-medium text-gray-500 mb-2">修改前数据</label>
            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
              <pre class="text-sm text-gray-700 overflow-x-auto">{{ JSON.stringify(log.old_data, null, 2) }}</pre>
            </div>
          </div>

          <!-- 新数据 -->
          <div v-if="log.new_data && Object.keys(log.new_data).length > 0">
            <label class="block text-sm font-medium text-gray-500 mb-2">修改后数据</label>
            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
              <pre class="text-sm text-gray-700 overflow-x-auto">{{ JSON.stringify(log.new_data, null, 2) }}</pre>
            </div>
          </div>

          <!-- 模型信息 -->
          <div v-if="log.model_type && log.model_id" class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-6 border-t border-gray-200">
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">关联模型</label>
              <p class="text-base text-gray-900">{{ log.model_type }}</p>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">模型ID</label>
              <p class="text-base text-gray-900">{{ log.model_id }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'

const props = defineProps({
  log: Object,
})

const formatDate = (date) => {
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  })
}

const getActionName = (action) => {
  const names = {
    create: '创建',
    update: '更新',
    delete: '删除',
    view: '查看',
    login: '登录',
    logout: '登出',
  }
  return names[action] || action
}

const getModuleName = (module) => {
  const names = {
    products: '产品管理',
    orders: '订单管理',
    users: '用户管理',
    categories: '分类管理',
    'system-settings': '系统设置',
    'specification-templates': '规格模板',
  }
  return names[module] || module
}

const getActionBadgeClass = (action) => {
  const classes = {
    create: 'bg-green-100 text-green-800',
    update: 'bg-blue-100 text-blue-800',
    delete: 'bg-red-100 text-red-800',
    view: 'bg-gray-100 text-gray-800',
  }
  return classes[action] || 'bg-gray-100 text-gray-800'
}
</script>

